<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: #5fa0f0;
        }

        .big {
            width: 1000px;
            height: 500px;
            position: relative;
            left: 0;
            right: 0;
            bottom: 0;
            top: 100px;
            margin: auto;
        }

        .cs {
            margin-left: 10px;
            margin-right: 10px;
        }

        .ss {
            width: 300px;
            height: 20px;
            border: 0;
            background-color: #9ad7f5;
            border-radius: 20px;
            color: white;
        }

        .wd {
            font-size: 100px;
        }
        #t{
            color: white;
        }
        .status {
            width: 60px;
            background-color: #82d16d;
            margin-left: 30px;
            margin-top: 30px;
            text-align: center;
            border-radius: 15px;
        }

        .tq {
            margin-left: 30px;
        }

        .xia {
            width: 100%;
            height: 300px;
        }

        .zong {
            width: 93%;
            height: 300px;
            background-color: #fff;
            margin-left: 40px;
            border-radius: 15px;
            margin-top: 20px;
        }

        h5 {
            padding: 15px;
        }

        ul li {
            margin-left: 30px;
            float: left;
        }

        ul li p {
            width: 100px;
            text-align: center;
        }
        ul li img{
            margin-left: 25px;
        }
        ol{
            width: 300px;
            background-color: #fff;
            position: fixed;
            right: 270px;
            top: 123px;
            margin: auto;
        }
        li{
            list-style: none;
        }
        ol li{
            width: 300px;
            height: 30px;
        }
        ol li .span{
            width: 300px;
            height: 30px;
        }
        ol li:hover{
            background-color: #f4f4f4;
        }
        .cod{
            display: none;
        }
    </style>
</head>

<body>
    <div class="big">
        <div id="t">
            <!-- <p><samp>2025-02-20 农历 正月二十三</samp><span style="float: right;"><span
                        class="iconfont icon-wxbdingwei"></span><span class="cs">北京市</span><input type="text"
                        placeholder="搜索城市" class="ss"></span></p>
            <div style="display: flex;">
                <span class="wd">2°</span>
                <div>
                    <p class="status">21&nbsp;优</p><br>
                    <p class="tq">☀晴 &nbsp;&nbsp;东南风&nbsp;&nbsp;2级</p>
                </div>
            </div>
            <p>今天：晴-5~-4°C&nbsp;&nbsp;&nbsp;&nbsp;紫外线&nbsp;&nbsp;&nbsp;&nbsp;湿度
                24%&nbsp;&nbsp;&nbsp;&nbsp;日出07:00&nbsp;&nbsp;&nbsp;&nbsp;日落17:56</p> -->
        </div>
        <ol>
            <!-- <li>
                <span></span>
            </li> -->
        </ol>
        <div class="xia">
            <div class="zong">
                <h5>7日内天气预报</h5><br>
                <ul>
                    
                </ul>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./lib/axios.min.js"></script>
<script>
    var ul = document.querySelector('ul')
    // var top = document.querySelector('#t')
    var ss = document.querySelector('.ss')
    var s = document.querySelector('.sss')
    var ol = document.querySelector('ol')
    var a = 110100
    var b=0;
    console.log(top);
    console.log(s);
    
    function render(cs) {
        axios.get(`https://hmajax.itheima.net/api/weather?city=${cs}`).then(res => {
            var aaa=[
                {}
            ]
            var crr = res.data.data.todayWeather
            var date = res.data.data.date
            var nl = res.data.data.dateLunar
            var area = res.data.data.area
            var pm = res.data.data.psPm25
            var pmzt = res.data.data.psPm25Level
            var wd = res.data.data.temperature
            var tq = res.data.data.weather
            var tqtb = res.data.data.weatherImg
            var fx = res.data.data.windDirection
            var jb = res.data.data.windPower
            var sd = crr.humidity
            var rc = crr.sunriseTime
            var rl = crr.sunsetTime
            var maxwd = crr.temDay
            var minwd = crr.temNight
            
            var brr = aaa.map((ele) => {
                return `
                <p><samp>${date} 农历 ${nl}</samp><span style="float: right;"><span
                        class="iconfont icon-wxbdingwei"></span><span class="cs">${area}</span><input type="text"
                        placeholder="搜索城市" class="ss"></span></p>
            <div style="display: flex;">
                <span class="wd">${wd}°</span>
                <div >
                    <p class="status">${pm}&nbsp;${pmzt}</p><br>
                    <p class="tq"><img src="${tqtb}" style='width:20px;height=20px' alt="">${tq} &nbsp;&nbsp;${fx}&nbsp;&nbsp;${jb}</p>
                </div>
            </div>
            <p>今天：${tq}${minwd}~${maxwd}°C&nbsp;&nbsp;&nbsp;&nbsp;紫外线&nbsp;&nbsp;&nbsp;&nbsp;湿度 ${sd}%&nbsp;&nbsp;&nbsp;&nbsp;日出${rc}&nbsp;&nbsp;&nbsp;&nbsp;日落${rl}</p>
                `
            })
            document.querySelector('#t').innerHTML = brr.join('')
            console.log(res);
            
        })
    }
    render(a)
    function xr(cs) {
        axios.get(`https://hmajax.itheima.net/api/weather?city=${cs}`).then(res => {
            var arr = res.data.data.dayForecast
            var brr = arr.map(ele => {
                return `
               <li>
                        <p><span>${ele.dateFormat}</span></p>
                        <p><span>${ele.date}</span></p>
                        <img src="${ele.weatherImg}" alt="">
                        <p><span>${ele.weather}</span></p>
                        <p><span>${ele.temNight}-${ele.temDay}°C</span></p>
                        <p><span>${ele.windDirection} ${ele.windPower}</span></p>
                </li>
                `
            }).join('')
            ul.innerHTML=brr
        })
    }
    xr(a)
    top.addEventListener('input',function(e){
        if(e.target.tagName=='INPUT'){
            var span=document.querySelector('ol li span')
            axios.get(`https://hmajax.itheima.net/api/weather/city?city=${e.target.value}`).then(res=>{
                var sj=res.data.data
                for(i=0;i<sj.length;i++){
                    var li=document.createElement('li')
                    li.innerHTML=`
                    <p class='span' onclick=fn(${sj[i].code})><span>${sj[i].name}</span></p>
                    `
                    ol.appendChild(li)
                }           
            })
            
        }
    })
    function fn(code){
        b=code
        render(b)
        xr(b)
        ol.innerHTML=''  
    }
</script>